<template>
  <div class="question-container">
    <h2 class="section-title animate__animated animate__fadeIn">
      <t-icon name="help-circle" class="title-icon" />
      最近提问
    </h2>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    
    <div v-else-if="questions.length === 0" class="empty-state animate__animated animate__fadeIn">
      <t-icon name="info-circle" class="empty-icon" />
      <p>暂无提问内容</p>
    </div>
    
    <div v-else class="question-list">
      <div 
        v-for="question in questions" 
        :key="question.id" 
        class="question-item animate__animated animate__fadeIn"
      >
        <div class="question-header" @click="navigateToQuestion(question)">
          <h3 class="question-title">{{ question.title }}</h3>
          <span class="question-time">{{ formatTime(question.createdAt) }}</span>
        </div>
        
        <div class="question-preview">
          <p>{{ truncateText(stripHtml(question.content), 100) }}</p>
          <div class="expand-button" @click="question.expanded = !question.expanded">
            <span>{{ question.expanded ? '收起' : '展开' }}</span>
            <t-icon :name="question.expanded ? 'chevron-up' : 'chevron-down'" />
          </div>
          <div v-if="question.expanded" class="expanded-content">
            <p>{{ stripHtml(question.content) }}</p>
          </div>
        </div>
        
        <div class="question-stats">
          <div class="stat-item">
            <t-icon name="heart-filled" class="stat-icon like-icon" />
            <span>{{ question.likeCount || 0 }}</span>
          </div>
          <div class="stat-item">
            <t-icon name="star" class="stat-icon star-icon" />
            <span>{{ question.favoriteCount || 0 }}</span>
          </div>
          <div class="stat-item">
            <t-icon name="chat" class="stat-icon chat-icon" />
            <span>{{ question.commentCount || 0 }}</span>
          </div>
          <div class="stat-item">
            <t-icon name="help-circle" class="stat-icon answer-icon" />
            <span>{{ question.answerCount || 0 }}</span>
          </div>
          <div class="view-details" @click="navigateToQuestion(question)">
            查看详情
            <t-icon name="arrow-right" class="arrow-icon" />
          </div>
        </div>
      </div>
      
      <el-pagination
        v-if="questions.length > pageSize"
        background
        layout="prev, pager, next"
        :total="questions.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        class="pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getQuestionsByUserIdOrderByDESC } from '@/api/questionApi';

const route = useRoute();
const router = useRouter();

const questions = ref([]);
const loading = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

onMounted(() => {
  fetchQuestions();
});

watch(
  () => route.params.id,
  (newId, oldId) => {
    if (newId && newId !== oldId) {
      currentPage.value = 1;
      fetchQuestions();
    }
  }
);

const fetchQuestions = async () => {
  loading.value = true;
  try {
    const userId = route.params.id;
    if (!userId) {
      ElMessage.warning('用户ID不存在');
      return;
    }
    
    const response = await getQuestionsByUserIdOrderByDESC(userId, currentPage.value, pageSize.value);
    questions.value = (response.data || []).map(question => ({
      ...question,
      expanded: false
    }));
  } catch (error) {
    console.error('获取提问内容出错:', error);
    ElMessage.error('获取提问内容失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

const handlePageChange = (page) => {
  currentPage.value = page;
  fetchQuestions();
};

const navigateToQuestion = (question) => {
  router.push(`/home/question/${question.id}/answerList`);
};

const formatTime = (timeString) => {
  if (!timeString) return '';
  
  const date = new Date(timeString);
  const now = new Date();
  const diffMs = now - date;
  const diffSec = Math.floor(diffMs / 1000);
  const diffMin = Math.floor(diffSec / 60);
  const diffHour = Math.floor(diffMin / 60);
  const diffDay = Math.floor(diffHour / 24);
  
  if (diffDay > 30) {
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
  } else if (diffDay > 0) {
    return `${diffDay}天前`;
  } else if (diffHour > 0) {
    return `${diffHour}小时前`;
  } else if (diffMin > 0) {
    return `${diffMin}分钟前`;
  } else {
    return '刚刚';
  }
};

const truncateText = (text, maxLength) => {
  if (!text) return '';
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};

const stripHtml = (html) => {
  if (!html) return '';
  return html.replace(/<[^>]*>/g, '');
};
</script>

<style scoped>
.question-container {
  padding: 24px;
  max-width: 960px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  color: #1a73e8;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.title-icon {
  margin-right: 12px;
  font-size: 1.9rem;
  background: linear-gradient(45deg, #1a73e8, #8ab4f8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loading-container {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #ffffff;
  border-radius: 12px;
  color: #5f6368;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.empty-icon {
  font-size: 56px;
  margin-bottom: 20px;
  color: #1a73e8;
  opacity: 0.8;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-item {
  padding: 24px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-left: 5px solid #1a73e8;
  position: relative;
  overflow: hidden;
}

.question-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73e8, #8ab4f8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.question-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.question-item:hover::before {
  opacity: 1;
}

.question-header {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.question-header:hover .question-title {
  color: #1a73e8;
}

.question-title {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
  color: #202124;
  font-weight: 600;
  transition: color 0.2s ease;
}

.question-time {
  font-size: 0.9rem;
  color: #5f6368;
  font-weight: 500;
}

.question-preview {
  margin-bottom: 20px;
  color: #3c4043;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
}

.expand-button {
  display: inline-flex;
  align-items: center;
  color: #1a73e8;
  cursor: pointer;
  font-size: 0.95rem;
  margin-top: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.expand-button:hover {
  color: #1557b0;
  transform: translateX(4px);
}

.expand-button .t-icon {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.expanded-content {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  animation: slideDown 0.3s ease;
  border-left: 3px solid #1a73e8;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-stats {
  display: flex;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  color: #5f6368;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.stat-icon {
  margin-right: 6px;
  font-size: 1.1rem;
}

.like-icon {
  color: #ea4335;
}

.star-icon {
  color: #fbbc04;
}

.chat-icon {
  color: #34a853;
}

.answer-icon {
  color: #1a73e8;
}

.view-details {
  margin-left: auto;
  color: #1a73e8;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #e8f0fe;
  transition: all 0.2s ease;
}

.view-details:hover {
  background: #d2e3fc;
  transform: translateX(4px);
}

.arrow-icon {
  transition: transform 0.2s ease;
}

.view-details:hover .arrow-icon {
  transform: translateX(4px);
}

.pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .question-container {
    padding: 16px;
  }
  
  .question-item {
    padding: 16px;
  }
  
  .question-title {
    font-size: 1.1rem;
  }
  
  .stat-item {
    font-size: 0.85rem;
  }
  
  .view-details {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
}
</style>
